{% include 'admin/header.html' %}
<style>
    @media (min-width: 1000px) {
        thead td:last-child {
            width: 240px;
        }
    }
</style>
<script type="text/javascript">
    changeTab('授课计划');
    $(function () {
        $('.min-select').change(function () {
            var year = $(this).val().substring(0, 4);
            location.href = '/admin/plan?year=' + year;
        });
    });

    function gotoPage(e, page) {
        var pages = {{ plan_list.pages }};
        var status = $(e).parent().attr("class");
        if (page > 0 && page <= pages && page !== {{ plan_list.page }} &&
            status !== "active") {
            location.href = '/admin/plan?page=' + page;
        }
    }

    function c_delete(id, k_name) {
        var flag = confirm("确定要删除<" + k_name + ">吗？");
        if (flag) {
            $.post('/class/delete/' + id, function (data) {
                if (data.status) {
                    alert("SUCCESS: 删除成功！");
                    location.reload();
                } else {
                    alert("ERROR: " + data.msg);
                    location.reload();
                }
            });
        }
    }

    function load_change(id) {
        var con = $('.plan-xcontent');
        con.html('');
        con.load('/admin/plan-ac?id=' + id);
    }

    function load_add() {
        var con = $('.plan-xcontent');
        con.html('');
        con.load('/admin/plan-ac');
    }

    function show_record(kid, status) {
        if (status === 0) {
            alert('未开始的课程没有记录！');
        } else {
            var year = $('select').val().substring(0, 4);
            location.href = '/admin/record?year=' + year + '&kid=' + kid;
        }
    }

    function toggle_k() {
        $('#show_k').toggle();
    }
    function show_plan(self) {
        var $stds = $('#show_k table td');
        var $tds = $(self).parent().siblings('td');
        $stds.eq(0).find('span').html($tds.eq(1).html());
        $stds.eq(1).find('span').html($tds.eq(3).html());
        $stds.eq(2).find('span').html($tds.eq(2).html());
        $stds.eq(3).find('span').html($tds.eq(5).html());
        $stds.eq(4).find('span').html($tds.eq(4).data('endtime'));
        $stds.eq(6).find('div').html($(self).parent().data('work'));
        toggle_k();
    }

</script>
<div class="plan-xcontent">
    <div>
        <div class="col-lg-12 col-xs-12">
            <h4><span class="fa fa-hand-o-right"></span> 授课计划</h4>
            <div style="padding: 15px 5px 0;" class="pull-right">
                <div class="input-group min-input pull-left">
                    <select class="form-control min-select">
                        {% for foo in years %}
                            {% if loop.index > 1 %}
                                <option {% if years[0] == foo.k_time %}selected{% endif %}>
                                    {{ foo.k_time }}年度
                                </option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <button onclick="load_add();" class="btn btn-info btn-sm">添加</button>
            </div>
        </div>
        <div>
            <div id="show_k" style="display: none; position: absolute; z-index: 10; width: 50%; left: 28%; top: 175px;">
                <div class="panel panel-primary">
                    <div class="panel-heading bg-color-x clearfix">
                        <div class="panel-title pull-left">课程详情</div>
                        <div onclick="toggle_k();" class="pull-right btn btn-xs">
                            <span>&times;</span>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td><b>课名: </b><span></span></td>
                                <td><b>开课时间: </b><span></span></td>
                            </tr>
                            <tr>
                                <td><b>老师: </b><span></span></td>
                                <td><b>出勤比例: </b><span></span></td>
                            </tr>
                            <tr>
                                <td><b>作业截止提交时间: </b><span></span></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="2"><div style="margin-top: 10px; word-break: break-all;"><!--作业安排--></div></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-xs-12">
                <table class="table table-striped">
                    <thead class="bg-color-x">
                    <tr>
                        <td>索引</td>
                        <td>课程名</td>
                        <td>上课老师</td>
                        <td>上课时间</td>
                        <td>状态</td>
                        <td>出勤比例</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    {% if plan_list.total <= 0 %}
                        <tr>
                            <td align="center" colspan="7">
                                暂无课程安排 <a href="javascript:" class="text-danger"
                                          onclick="load_add();">快去添加</a>
                            </td>
                        </tr>
                    {% else %}
                        {% for a in plan_list.result %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ a.k_name }}</td>
                                <td>{{ a.k_teacher }}</td>
                                <td>{{ a.k_time }}</td>
                                <td data-endtime="{{ a.k_work_endtime }}"><span class="class-{{ a.k_status }}"></span></td>
                                <td>{{ a.k_stu_num }}/{{ stu_all }}</td>
                                <td data-work="{{ a.k_work }}">
                                    <button onclick="show_plan(this)" class="btn btn-xs btn-info">查看详情</button>
                                    <button onclick="show_record({{ a.id }}, {{ a.k_status }})" class="btn btn-xs btn-success">考勤信息
                                    </button>
                                    <button onclick="load_change({{ a.id }})" class="btn btn-xs btn-primary">修改</button>
                                    <button onclick="c_delete({{ a.id }}, '{{ a.k_name }}')" class="btn btn-xs btn-danger">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
                <!-- 分页按钮 -->
                {% if plan_list.pages > 1 %}
                    <div class="col-lg-12 col-xs-12 text-center">
                        <ul style="margin: 0;" class="pagination pagination-sm">
                            <li onclick="gotoPage(this, 1)"><a href="javascript:">首页</a></li>
                            <li onclick="gotoPage(this, {{ plan_list.page - 1 }})"><a href="javascript:">&laquo;</a>
                            </li>
                            {% for foo in plan_list.pageNums %}
                                <li onclick="gotoPage(this, {{ foo }})"
                                    class="{% if foo == plan_list.page %}active{% endif %}">
                                    <a href="javascript:">{{ foo }}</a>
                                </li>
                            {% endfor %}
                            <li onclick="gotoPage(this, {{ plan_list.page + 1 }})"><a href="javascript:">&raquo;</a>
                            </li>
                            <li onclick="gotoPage(this, {{ plan_list.pages }})"><a href="javascript:">尾页</a></li>
                        </ul>
                        <span style="padding-top: 15px; font-size: 12px;" class="pull-right">
                            共{{ plan_list.pages }}页，{{ plan_list.total }}条数据
                        </span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% include 'admin/footer.html' %}